<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="google-site-verification" content="VPNVdx2MKCNRXDA1HC89VbfeA6EZ5q7IdSuGsx254YM" />

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="icon" 
      type="image/png" 
      href="/imgs/favicon.png" />

<style type="text/css">
  html { height: 100%; }
  body { height: 100%; margin: 0px; padding: 0px; }
  * {margin: 0; padding: 0; }
  body { font-family: 'Arvo', arial, serif; }
  #map_canvas { width:100%; height: 100%; }
  
  #top { 
  float:left; 
  position: absolute; 
  width: 100%; 
  height: 30px; 
  background-color: #333; 
  border-bottom:1px solid rgb(80,80,80);
  color:white; 
  font-size: 25px; 
  line-height: 30px; 
  z-index:1000;}
  
  ul {list-style: none; height: 4%; margin:auto;}
  li {float: left; padding-left:10px;}
  #scrollingtext a, li a {color:white; text-decoration: none;}
  #scrollingtext a:hover,li a:hover{color:rgb(0,204,255); text-decoration: none;}
  
  .scroll{
		position:absolute;
		float:left;
		bottom:0px;
		height:24px;
		width:100%;
		display:block;
		overflow:hidden;
		//border:#CCCCCC 1px solid;
		background-color:#333;}
	#scrollingtext{
		position:absolute;
		white-space:nowrap;
		font-family:'Geo',Arial;
		font-size:18px;
		font-weight:bold;
		color:white;
		}
  
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript" src="./jquery.Scroller-1.0.src.js"> </script>
<script type="text/javascript">
var rssData = new Array();
var map;
var trafficLayer;
var transitLayer;
function initialize() {
  var turin = new google.maps.LatLng(45.070778,7.686621);
  var myOptions = {
    zoom: 13,
    center: turin,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  trafficLayer = new google.maps.TrafficLayer();
  //transitLayer = new google.maps.TransitLayer();
	//transitLayer.setMap(map);
}

// Removes the overlays from the map, but keeps them in the array
function clearMarkers(markerArr) {
  if (markerArr) {
    for (i in markerArr) {
      markerArr[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showMarkers(markerArr) {
  if (markerArr) {
    for (i in markerArr) {
      markerArr[i].setMap(map);
    }
  }
}

function showMarker(i) {
		clearMarkers(rssData);
    rssData[i].setMap(map);
    return false;
}
/*------------------------*/
var ztlCoords = new Array();
var ztlGates = new Array();

$(document).ready(function(){   

		$.ajax({
			type: "GET",
			url: "xml_data/ztl.xml",
			dataType: "xml",
			success: function(xml) { 
				//console.log(xml);
				$(xml).find('point').each(function(){
					var lat = $(this).attr('lat');
					var lng = $(this).attr('lng');
					ztlCoords.push( new google.maps.LatLng(lat, lng));
				});
				$(xml).find('gate').each(function(){
					var latM = $(this).attr('lat');
					var lngM = $(this).attr('lng');
					var title = $(this).attr('name');
					marker = new google.maps.Marker({position: new google.maps.LatLng(latM, lngM),title: title, map: null}); 
					ztlGates.push(marker);
				});
			} 
		});

/*------------------------*/
var parkingSpots = new Array();
//var parkingInfo = new Array();
		$.getJSON("pk2json.jsp", function(json) {
		//console.log(json);
		var i = 0;
    $(json.pk).each(function(i) {
        /* YOUR CODE HERE */
        	var lat = this.lat;
					var lng = this.lng;
					var nome = this.name;
					var free = this.free; 
					var total = this.total;
					
					var marker = new google.maps.Marker({position: new google.maps.LatLng(lat, lng), title: nome, icon: 'imgs/parking.png', map: null}); 
					var info = new google.maps.InfoWindow({
    				content: (nome+ '<br> Totali: ' + total + '<br> Liberi: ' + free)
					});
					google.maps.event.addListener(marker, 'click', function() {
  					info.open(map,marker);
					});
					parkingSpots.push(marker);
					//parkingInfo.push(info);
				});
		});

/*------------------------
var trafficData = new Array();
		$.getJSON("ftd2json.jsp", function(json) {
		//console.log(json);
		var i = 0;
    $(json.ftd).each(function(i) {
        	var lat  = this.lat;
					var lng  = this.lng;
					var nome  = this.nome_strada;
					var flow  = this.flow;
					var speed = this.speed;
					var dir   = this.dir;
					var marker = new google.maps.Marker({position: new google.maps.LatLng(lat, lng), title: nome, map: null});
					
					var info = new google.maps.InfoWindow({
    				content: (nome+ '<br> Veicoli: ' + flow + '<br> Velocità: ' + speed)
					});
					google.maps.event.addListener(marker, 'click', function() {
  					info.open(map,marker);
					});
					
					//parkingInfo.push(info); 
					trafficData.push(marker);
				});
		});
		
/*------------------------*/
		

var rssInfo = new Array();
		$.getJSON("rss2json.jsp", function(json) {
		console.log(json);
		var i = 0;
    $(json.rss).each(function(i) {
        /* YOUR CODE HERE */
        	var lat  = this.lat;
					var lng  = this.lng;
					var titolo  = this.titolo;
					var desc  = this.desc;
					var link = this.link;

					var dir   = this.date;
					var marker = new google.maps.Marker({position: new google.maps.LatLng(45.070778,7.686621), title: titolo, map: null});
					
					var info = new google.maps.InfoWindow({
    				content: (titolo + '<br>' + desc + '<br> <a href="'+link+'" target="blank" title="'+desc+'">link</a>')
					});
					google.maps.event.addListener(marker, 'click', function() {
  					info.open(map,marker);
					});
					
					rssInfo.push(info); 
					//var tmp =titolo + ":" + desc;
					$('#scrollingtext').append( '<a href="#" id="" onclick="showMarker('+i+');" title="'+desc+'">'+titolo+',</a>&nbsp' );
					rssData.push(marker);
				});
		});

	

/*------------------------*/
		
		$.ajax({
				type: "GET",
				url: "xml_data/weather.ashx",
				dataType: 'json',
				success: function(results){
						console.log(results);
				    var temp = results.data.current_condition[0].temp_C;
				    var conditions = results.data.current_condition[0].weatherDesc[0].value;
				    var icon = results.data.current_condition[0].weatherIconUrl[0].value;
				    $('#weather').append( conditions + ' : ' + temp +' C ');
				}
		});

	
/*------------------------*/
    
    
    $("#ztl").toggle(function(event){ 
    zonaZTL = new google.maps.Polygon({
      paths: ztlCoords,
      strokeColor: "#009900",
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: "#009900",
      fillOpacity: 0.35
    });   
      zonaZTL.setMap(map);
      showMarkers(ztlGates);
      $("#ztl").attr('style','color:#00CCFF;');
    }, function(event) {
      zonaZTL.setMap(null);
      clearMarkers(ztlGates);
      $("#ztl").attr('style','undefined');
    });
/*------------------------*/
     
    $("#parking").toggle(function(event){ 
      showMarkers(parkingSpots);
      $("#parking").attr('style','color:#00CCFF;');
    }, function(event) {
      clearMarkers(parkingSpots);
      $("#parking").attr('style','undefined');
    });
     
/*------------------------*/
     
   $("#traffic").toggle(function(event){
     	//showMarkers(trafficData);
     	trafficLayer.setMap(map);
      $("#traffic").attr('style','color:#00CCFF;');
    }, function(event) {
      //clearMarkers(trafficData);
      trafficLayer.setMap(null);
      $("#traffic").attr('style','undefined');  
   });
    
/*------------------------*/
     
   $("#contact").toggle(function(event){
    //alert("We're working!");
      $("#top").attr('style','height:200px;');
      $("#contact").attr('style','color:#00CCFF;');
      $("#form").show();     
      rssData[6].setMap(map)
   },function(event) {
      $("#top").attr('style','undefined');
      $("#contact").attr('style','undefined');
      $("#form").hide();
    });
});
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22382076-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>
<body onload="initialize()">

  <div id="top">
    <ul class="nav">
      <li style="color:#FF6600;">TurinRadar</li>
      <li><a id="ztl" href="#">ZTL</a></li>

      <li><a id="parking" href="#">Parcheggi</a></li>
      <li><a id="traffic" href="#">Traffico</a></li>
      <!--li><a id="contact" href="#">Contact us</a></li-->
      <li><a id="mostre" style="font-size:20px;" href="#">Mostre</a></li>
      <li><a id="musica" style="font-size:20px;" href="#">Musica</a></li>
      <li><a id="cinema" style="font-size:20px;" href="#">Cinema</a></li>
      <li><a id="teatro" style="font-size:20px;" href="#">Teatro</a></li>
      <li id="weather" style="color:#FF6600;float:right;margin-right:10px;"></li>
    </ul>

		<!--   Form follows     -->                

    <form id="form" style="display:none; position:relative; float:left; height:100px; width:100%; vertical-align: text-top;" method=POST action="mailto:turinmail@$gmail.com" enctype="text/plain">
    
    <div style="position:relative;float:left; margin-left:10px;">   
    name : &nbsp &nbsp
    <input type="text" size="50" name="username"> <br>
    email : &nbsp &nbsp
    <input type="text" size="50" name="email"> <br>
    subject :
    <input type="text" size="50" name="subject"><br>
    </div>
    
    <div style="position:relative; float:left; margin-left:10px;">
    text :<br>
    <textarea name="text" rows="4" cols="50" wrap="hard">
    </textarea> <br>
    <input name="redirect" type="hidden" value="#">
    <input name="NEXT_URL" type="hidden" value="#">
    <input type="submit" value="Send">
    <input type="reset" value="Clear">
		</div>
		
    </form>

    <!-- END OF FORM -->

  </div>
  
  <div id="map_canvas" style="width:100%;">
  
  </div>
  
  <div class="scroll">
	<div id="scrollingtext">
		RSS:&nbsp
	</div>
	</div>
	
</body>
<script type="text/javascript">
	//create scroller for each element with "scrollingtext" class...
	$('.scroll').SetScroller({	velocity: 90,
											direction: 	 'horizontal',
											startfrom: 	 'right',
											loop:		 'infinite',
											movetype: 	 'linear',
											onmouseover: 'pause',
											onmouseout:  'play',
											onstartup: 	 'play',
											cursor: 	 'pointer'
										});
	/*
		All possible values for options...
		
		velocity: 		from 1 to 99 								[default is 50]						
		direction: 		'horizontal' or 'vertical' 					[default is 'horizontal']
		startfrom: 		'left' or 'right' for horizontal direction 	[default is 'right']
						'top' or 'bottom' for vertical direction	[default is 'bottom']
		loop:			from 1 to n+, or set 'infinite'				[default is 'infinite']
		movetype:		'linear' or 'pingpong'						[default is 'linear']
		onmouseover:	'play' or 'pause'							[default is 'pause']
		onmouseout:		'play' or 'pause'							[default is 'play']
		onstartup: 		'play' or 'pause'							[default is 'play']
		cursor: 		'pointer' or any other CSS style			[default is 'pointer']
	*/
	</script>
</html>
